<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>monitor管理系统</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">

    body{
      margin-top: 50px;
      padding-bottom: 50px;
    } 

    .carousel{
      height: 500px;
      background-color: white;
      margin-bottom: 60px;
    }
    .carousel .item{
      height: 500px;
      background-color: white;
    }

    .carousel img{
      width: 100%;
    }
    #container_add{
       text-align: center;
    }

    hr .dirived{
      margin: 40px 0;
    }

    .iphone{
      background-image: url("img/download_icons.png");
      display: inline-block;
      margin: 0 auto 20px;
      background-position: -164px 0;
      height: 97px;
      width: 49px;
    }
    .android{
      background-image: url("img/download_icons.png");
      display: inline-block;
      margin: 0 auto 20px;
      background-position: -106px 0;
      height: 97px;
      width: 57px;
    }

    .show_download{
      margin-top: 20px;
      padding: 0px,10px;
    }

    .imgpos{
      margin-bottom: 24px;
    }
  </style>
</head>
<body>
  <!--nav start-->
  <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" style="padding-top: 7px;">
        <img src="img/web_logo.png" height="34" width="182"/>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">首页</a></li>
        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下载 <span class="caret"></span></a>
          <ul class="dropdown-menu" id="downloadList">
            <li><a href="#home">51人品</a></li>
            <li><a href="#profile">51管家</a></li>
            <li><a href="#messages">办卡神器</a></li>
          </ul>
        </li>

        <li><a href="#">在线办卡</a></li>
        <li><a href="#">51借款</a></li>
        <li><a href="javascript:;" data-toggle="modal" data-target="#myModal">用户论坛</a></li>

      </ul>
    </div>
  </div>
</nav>
<!--nav end-->


<!--carousel start-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/51gj.jpg" height="1800" width="1800" alt="0">
      <div class="carousel-caption">
         <h3>管你一切信用卡</h3>
         <p>多张信用卡轻松绑定管理> 智能分析消费信息没有糊涂账> 账单到期自动提醒告别逾期> 办卡、借款、理财、查询 一键搞定</p>
         <p><a href="" class="btn btn-primary">我要下载</a></p>
      </div>
    </div>

    <div class="item">
      <img src="img/bk2.jpg" height="256" width="256" alt="1">
      <div class="carousel-caption">
        <h3>办卡神器</h3>
         <p>上门服务> 审批简便> 账单到期自动提醒告别逾期> 办卡、借款、理财、查询 一键搞定</p>
         <p><a href="" class="btn btn-primary">我要下载</a></p>
      </div>
    </div>

    <div class="item">
      <img src="img/rp.jpg" height="500" width="900" alt="2">
      <div class="carousel-caption">
        <h3>理财APP中的战斗机</h3>
         <p>人品贷、门槛低、速度快、流程少> 高人品、高收益、高额度> 引入社交元素，好友标签互动</p>
         <p><a href="" class="btn btn-primary">我要下载</a></p>
      </div>
    </div>
  
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!--carousel end-->

<!--布局S--> 
<div class="container" id="container_add">
  <div class="row">
    <div class="col-md-4">
       <img class="img-circle" src="img/smallrp.jpg" height="150" width="150"/>
       <h2>51人品</h2> 
       <p>多张信用卡轻松绑定管理,智能分析消费信息没有糊涂账</p>
       <p><a href="" class="btn btn-default">点我下载</a></p>
    </div>
    <div class="col-md-4">
      <img class="img-circle" src="img/51gjsmall.jpg" height="150" width="150"/>
       <h2>51管家</h2> 
       <p>多张信用卡轻松绑定管理,智能分析消费信息没有糊涂账</p>
       <p><a href="" class="btn btn-default">点我下载</a></p>
    </div>
    <div class="col-md-4">
      <img class="img-circle" src="img/bksmall.jpg" height="150" width="150"/>
       <h2>办卡神器</h2> 
       <p>多张信用卡轻松绑定管理,智能分析消费信息没有糊涂账</p>
       <p><a href="" class="btn btn-default">点我下载</a></p>
    </div>
  </div>
  <hr class="dirived"/>

<!--标签页面S-->
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" id="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">51人品</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">51管家</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">办卡神器</a></li> 
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <div class="row">
        <div class="col-md-4 show_download">
           <span class="iphone"></span>
           <a href="" class="btn btn-default btn-lg btn-block">下载至Iphone</a>
        </div>
        <div class="col-md-4 show_download">
          <span class="android"></span>
           <a href="" class="btn btn-default btn-lg btn-block">下载至Andriod</a>
        </div>
        <div class="col-md-4 show_download">
            <img src="img/u51_qrcode.png" height="97" width="97" class="imgpos"/>
            <a href="" class="btn btn-default btn-lg btn-block" disabled="disabled">二维码下载</a>
        </div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <div class="row">
        <div class="col-md-4 show_download">
           <span class="iphone"></span>
           <a href="" class="btn btn-default btn-lg btn-block">下载至Iphone</a>
        </div>
        <div class="col-md-4 show_download">
          <span class="android"></span>
           <a href="" class="btn btn-default btn-lg btn-block">下载至Andriod</a>
        </div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
      <div class="row">
        <div class="col-md-4 show_download">
            <img src="img/u51_qrcode.png" height="97" width="97" class="imgpos"/>
            <a href="" class="btn btn-default btn-lg btn-block" disabled="disabled">二维码下载</a>
        </div>
      </div>
    </div>
  </div>

</div>
<!--标签页面E-->
<hr class="dirived"/>
<footer>
   <p class="pull-right">
     <a href="#">回到顶部</a>
   </p>
   <p>
     <a href="#">杭州恩牛网络技术有限公司版权所有浙ICP备12036034号
Copyright©2012-2014 Enniu.All Rights Reserved.</a>
   </p>


</footer>


</div>
<!--布局E--> 

<!--modal S-->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">用户论坛</h4>
      </div>
      <div class="modal-body">
        <p>正在开发中&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--modal E-->

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $("#downloadList a").click(function(){
          var href = $(this).attr("href");
          $("#tablist a[href='"+href+"']").tab("show");
      });
   });
</script>


</body>
</html>